<template>
  <div>
    姓名：<input v-model="name" /> <button @click="changeName">名字后⾯加1</button> {{
      name }} <br />
    薪⽔：<input type="number" v-model="money" /> <button @click="addSalary">薪⽔加
      1000</button> {{ money }}
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue';
// 对象类型⽤reactive声明响应式
let salaryInfo = reactive({ userName: "王⼀", salary: 15000 })
// 拆解出来的属性，是基础数据，不具备响应式
// let name = salaryInfo.userName
// let money = salaryInfo.salary
// toRef将对象的属性转为⼀个响应式数据
let name = toRef(salaryInfo, 'userName')
let money = toRef(salaryInfo, 'salary')
// 将对象的所有属性⼀起转换成响应式数据
// let {userName,salary} = toRefs(salaryInfo)
function changeName() {
  name.value += "⼀"
  console.log("name", name)
}
function addSalary() {
  money.value += 1000
  //观察SalaryInfo对象
  console.log("money", money)
}
</script>
<style scoped></style>
